<template>
	<view class="containerbox bgc-white">
		<uv-navbar title="绘本阅读" auto-back placeholder />
		<swiper class="flex-1" style="min-height: 0;" @change="swiperChange" skip-hidden-item-layout>
			<swiper-item v-for="item,index in swiperlist" :key="index">
				<view class="containerbox" v-if="index === swiperIndex">
					<view class="containerbox">
						<view class="px-30 pt-50">
							<view style="width: 300rpx; margin: 0 auto;">
								<image :src="`${$imageBaseUrl}default/empty.png`" mode="widthFix" style="height: 146rpx;" class="w-full"></image>
							</view>
							<view style="flex: 1; margin-top: 30rpx;">
								<view class="speech-bubble">
									<view class="mb-10 text-gray text-28">根据原文进行朗读</view>
									<view class="text-36">
										{{item.sentence}}
									</view>
								</view>
							</view>
						</view>
						<view class="flex flex-column items-center px-50 relative" v-if="item.answerFile">
							<view class="relative w-full">
								<view class="bgc-white w-full px-30 py-50 round-md absolute" :class="{fadeInUp: item.answerFile}">
									<view class="flex items-center pb-30">
										<view class="flex-1 text-24 pr-30" style="min-width: 0; border-right: 1px dashed #e6e6e6;">
											<view class="flex items-center mb-25">流利度 <text class="ml-5" style="width: 40rpx;">{{item.evaluation?.fluency.toFixed(0)}}</text> <view class="jindubox ml-20"><view class="tag" :style="'width: '+(item.evaluation?.fluency || 0)+'%;'"></view></view></view>
											<view class="flex items-center mb-25">准确度 <text class="ml-5" style="width: 40rpx;">{{item.evaluation?.accuracy.toFixed(0)}}</text> <view class="jindubox ml-20"><view class="tag" :style="'width: '+(item.evaluation?.accuracy || 0)+'%;'"></view></view></view>
											<view class="flex items-center">完整度 <text class="ml-5" style="width: 40rpx;">{{item.evaluation?.completion.toFixed(0)}}</text> <view class="jindubox ml-20"><view class="tag" :style="'width: '+(item.evaluation?.completion || 0)+'%;'"></view></view></view>
										</view>
										<view class="relative">
											<view class="absolute text-20" style="left: 30rpx; bottom: 50rpx;">0</view>
											<view class="absolute text-20" style="left: 64rpx; top: 32rpx;">30</view>
											<view class="absolute text-20" style="right: 64rpx; top: 32rpx;">60</view>
											<view class="absolute text-20" style="right: 10rpx; bottom: 50rpx;">100</view>
											<image :src="`${imgPath}png/testone.jpg`" mode="widthFix" style="width: 312rpx; height: 206rpx;"></image>
											<view class="absolute" style="left: 50%; transform: translate(-50%, -50%); top: 64%; font-size: 28rpx;">{{item.evaluation.score}}分</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="justify-center flex items-center text-48 pb-80">
						<c_record :key="index" @end="endRecord($event, item)" @confirm="nextEvent(2)"/>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from 'vue';
import { useCos } from '@/common/hooks/useCos'
import c_record from './components/record.vue'
import { speaksubmit_api } from '@/common/apis/other'
import { imgPath } from '@/common/config.js'

const recorderManager = uni.getRecorderManager()

const swiperlist = ref([])

// 最后结束
const submitData = reactive()
// 每个语音提交的
const reqdata = ref({
	// exerciseId
	// sentenceId
	// answerFile
})

const swiperIndex = ref(0)

function swiperChange(e){
	swiperIndex.value = e.detail.current
}

onLoad( o => {
	swiperlist.value = uni.getStorageSync('sentencelist')
	console.log(swiperlist.value)
	reqdata.value = o
})

async function endRecord(data, item){
	const { cosdata, str, cosapi, resdata } = await useCos(data.tempFilePath)
	let obj = {
		exerciseId: reqdata.value.id,
		sentenceId: item.id,
		useTime: 30,
		answerFile: str
	}
	speaksubmit_api(obj).then(res => {
		console.log('评论结束', res)
		swiperlist.value[swiperIndex.value] = {...item, ...{evaluation: res.evaluation,
		suggestion: res.suggestion,
		answerFile: {
			path: str,
			url: 'https://' + resdata.Location
		}}}
		// emit('end', {
		// 	...props.item,
		// 	evaluation: res.evaluation,
		// 	suggestion: res.suggestion,
		// 	answerFile: {
		// 		path: str,
		// 		url: 'https://' + resdata.Location
		// 	}
		// })
	}).catch(err => {
		jisuanStatus.value = false
	})
}

recorderManager.onStop(res => {
	// emit('end', testdata.value)
	console.log('录音完成', swiperlist.value[swiperIndex.value], res)
	// endRecord(res, swiperlist.value[swiperIndex.value])
})
</script>

<style lang="scss" scoped>
	.jindubox{
		border-radius: 50rpx;
		flex: 1;
		min-width: 0;
		background-color: #f5f5f5;
		overflow: hidden;
		position: relative;
		height: 8rpx;
		.tag{
			width: 0;
			height: 100%;
			background-color: $primary;
			border-radius: 50rpx;
		}
	}
	.speech-bubble {
		position: relative;
		background: #fff;
		border: 1px solid #e5e5e5;
		border-radius: 20rpx;
		padding: 20px 40rpx;
		color: #333;
		font-size: 30rpx;
		width: 100%;
		animation: fadeIn 0.5s ease-in-out;  
		position: relative;
	}
	.speech-bubble:after{
		content: '';
		display: block;
		position: absolute;
		background-image: linear-gradient(to bottom, transparent, #fbfbfb);
		height: 120rpx;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
	}
	@keyframes fadeInUp {
	  from {  
	    opacity: 0; /* 初始透明度为0 */  
	    transform: translateY(30px); /* 初始位置向下偏移30px */  
	  }  
	  to {  
	    opacity: 1; /* 透明度变为1，即完全可见 */  
	    transform: translateY(0); /* 回到原始位置 */  
	  }  
	}  
	.fadeInUp {  
	  animation-name: fadeInUp; /* 应用上面定义的关键帧动画 */  
	  animation-duration: 1s; /* 动画持续时间 */  
	  animation-fill-mode: both; /* 动画完成后保持最后一帧的状态 */  
	  /* 可以根据需要添加更多动画属性，如animation-timing-function等 */  
	}
</style>